<template>
    <Tabs :value="name" @on-click="clickTab">
        <Tab-pane label="流程信息" name="name1">
            <ext-act-process-list ref="process-list" @config="showConfig" v-if="!showDetail"/>
        </Tab-pane>
        <Tab-pane label="节点信息" name="name2" v-if="showDetail">
            <ext-act-node-config-list ref="nodeConfig" v-if="showDetail"/>
        </Tab-pane>
    </Tabs>
</template>

<script>
    import ExtActProcessList from './ExtActProcessList'
    import ExtActNodeConfigList from '../ext_act_node_config/ExtActNodeConfigList'

    export default {
        name: "process-design",
        components: {ExtActProcessList, ExtActNodeConfigList},
        data() {
            return {
                showDetail: false,
                name: "name1"
            }
        },
        methods: {
            showConfig() {
                this.showDetail = true;
                var key = arguments[0];
                this.name = "name2";
                this.$nextTick(() => {
                    this.$refs.nodeConfig.edit(key);
                });

            },
            clickTab(e) {
                if (e == "name1") {
                    this.showDetail = false;
                    this.name = "name1";
                }
            }
        },

    }
</script>

<style scoped>

</style>